<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/babel">  /* 此处一定要写babel */
      /* // 1.创建虚拟DOM
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }
      // 2.创建挂载点
      const container = document.getElementById('test');
      const test = ReactDOM.createRoot(container);
      // 3.绑定虚拟DOM
      test.render(<MyApp />); */

      // JSX写法
      // 1.创建虚拟DOM
      const VDOM = <h1><span>Hello world!</span></h1> // 此处一定不要写引号，因为不是字符串；并且h1标签需要闭合，否则报错 react SyntaxError：内联Babel脚本：Unterminated JSX内容
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"))

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>